<template>
	<view style="overflow: hidden;">
		<view style="background-color: #FFFFFF;padding:60upx;overflow: hidden;">
			<view style="font-size:24px;font-weight: bold;">输入个人信息</view>
			<view style="color:#666666;margin-bottom:20px;">填写相关信息，获取更加精准的测试结果</view>
			<view class="weui-cells guest weui-noline weui-cells__form">
				<view class="weui-flex" style="margin-bottom:20px;text-align: center;">
					<view class="weui-flex__item" @click="formInfo.gender='1'">
						<image :src="'../../static/' + (formInfo.gender=='1' ? 'man-a@2x.png':'man@2x.png')"
							style="height:50px;" mode="heightFix"></image>
						<view>男</view>
					</view>
					<view class="weui-flex__item" @click="formInfo.gender='0'">
						<image :src="'../../static/' + (formInfo.gender=='0' ? 'woman-a@2x.png':'woman@2x.png')"
							style="height:50px;" mode="heightFix"></image>
						<view>女</view>
					</view>
				</view>
				<!-- 	<view class="weui-cell weui-noline">
					<view class="weui-cell__hd"><text class="weui-label">昵称</text></view>
					<view class="weui-cell__bd weui-cell__primary">
						<input class="weui-input" placeholder="请输入昵称" v-model="formInfo.nickName" />
					</view>
				</view> -->
				<view class="weui-cell weui-noline weui-cell_access">
					<view class="weui-cell__hd"><text class="weui-label">出生年份</text></view>
					<view class="weui-cell__bd weui-cell__primary weui-picker" style="margin-right: -150px;"
						@click="clickPicker()">
						<picker @change="changePicker('year',$event)" :value="formInfo.year" mode="date" fields="year">
							<view v-if="formInfo.year==''" class="uni-input-placeholder" style="position:unset;">请选择
							</view>
							<text v-else>{{formInfo.year}}</text>
						</picker>
					</view>
					<view class="weui-cell__ft"></view>
				</view>
				<view class="weui-cell weui-noline weui-cell_access">
					<view class="weui-cell__hd"><text class="weui-label">皮肤状态</text></view>
					<view class="weui-cell__bd weui-cell__primary weui-picker" style="margin-right: -150px;">
						<picker @change="changePicker('state',$event)" :range="pickerState.values" range-key="name"
							style="position: relative;z-index: 2;">
							<view v-if="formInfo.stateName==''" class="uni-input-placeholder" style="position:unset;">
								请选择
							</view>
							<text v-else>{{formInfo.stateName}}</text>
						</picker>
					</view>
					<view class="weui-cell__ft"></view>
				</view>
				<view style="margin-top:30px;">
					<button @click="moTest" class="weui-btn_primary" Data-btnname="即刻测肤"
						:class="isNext ? '':'weui-btn_disabled'" :disabled="!isNext">即刻测肤</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNext: false,
				startTime: undefined,
				startYear: "1921",
				endYear: new Date().getFullYear(),
				nextActive: false,
				pickerState: {
					index: -1,
					values: [],
				},
				formInfo: {
					id: "", //ID
					gender: "0", //性别
					nickName: "", //昵称
					year: "", //年月
					state: "", //状态
					stateName: "" //状态姓名
				}
			}
		},
		watch: {

		},
		onLoad(e) {

			// console.log("user",this.$users);

			this.$users.checkLogin();
			this.pickerState.values = [{
					name: "纯素颜",
					id: "1"
				},
				{
					name: "护肤后",
					id: "2"
				},
				{
					name: "上妆后",
					id: "3"
				}
			];

			this.$utils.postApi("customer/list?assistantShop=" + this.$users.ID).then(res => {
				if (res.code == 0) {
					if (res.data.length > 0) {
						var item = res.data[0];
						// console.log("item333",item);
						this.formInfo.id = item.id;
						this.formInfo.nickName = item.nickName;
						this.formInfo.year = (item.birth == null ? '' : item.birth);
						this.formInfo.gender = item.sex;
					}
				} else {
					this.$common.alert(res.message);
				}
			});
		},
		onShow() {
			let _this = this;
			_this.handleSugoioLoad('输入个人信息页', 'guest-add')
		},
		methods: {
			clickPicker() {
				if (this.formInfo.year == '') {
					// 如果未选择年份，则年份为空
					this.formInfo.year = "1980";
				}
			},
			changePicker(type, e) {
				switch (type) {
					case "year":
						this.formInfo.year = e.target.value;
						break;
					case "state":
						this.formInfo.state = this.pickerState.values[e.target.value].id;
						this.formInfo.stateName = this.pickerState.values[e.target.value].name;
						break;
				}

				if (this.formInfo.year != '' && this.formInfo.stateName != '') {
					this.isNext = true;
				}

			},
			moTest() {
				let opt = this.formInfo;
				let that = this;
				// console.log("opt",opt);


				let next = function(res) {
					if (res.code == 0) {
						that.formInfo.id = res.data.id;
						opt = that.formInfo;
						let json = encodeURIComponent(JSON.stringify(opt))
						that.$common.to(
							'../h5/h5-course?json=' + json
						)
					}else{
						that.$common.alert(res.msg); 
					}

				}

          
				if (this.formInfo.id == "") {
					var data = "nickName=" + this.$users.NickName +
						"&sex=" + opt.gender +
						(opt.year != "" ? "&birth=" + opt.year : "&birth=") +
						(opt.year != "" ? "&age=" + parseInt(new this.XDate(opt.year + '-01-01').diffYears(new this
							.XDate())) : "&age=0") +
						"&tell=" + this.$users.Mobile.replace(/\s+/g, "") + 
						// 皮肤状态不需要默认
						// "&state=" + (this.formInfo.state == '' ? '1' : this.formInfo.state) +
						"&state=" + (this.formInfo.state) +
						"&assistantShop=" + this.$users.ID+
						"&unionId="+this.$users.UnionId;;

					this.$common.initAjax({
						url: "customer/add?" + data,
						type: "post",
						success: (res) => {
							next(res);
						}
					});
				} else {
					var data = "id=" + this.formInfo.id +
						"&nickName=" + this.$users.NickName +
						"&sex=" + opt.gender +
						(opt.year != "" ? "&birth=" + opt.year : "") +
						(opt.year != "" ? "&age=" + parseInt(new this.XDate(opt.year + '-01-01').diffYears(new this
							.XDate())) : "") +
						"&tell=" + this.$users.Mobile.replace(/\s+/g, "") + 
						"&state=" + (this.formInfo.state) +
						"&assistantShop=" + this.$users.ID+
						"&unionId="+this.$users.UnionId;;

					this.$common.initAjax({
						url: "customer/update?" + data,
						type: "post",
						success: (res) => {
							next(res);
						}
					});
				}

			}
		}
	}
</script>


<style lang="scss">
	.guest .weui-cell {
		background-color: #f9f9f9;
		border-radius: 100px;
		margin-bottom: 20px;
		padding: 8px 20px;
	}

	@mixin info {
		font-size: 12px;
		color: #333333;
		line-height: 17px;
	}



	.face-image {
		width: 100vw;
		height: 0;
		padding-bottom: 84vh;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
	}
</style>
